<template>
  <view class="cell border-bottom-after">
    <view class="cell-left" v-if="leftIcon || label">
      <template v-if="leftIcon">
        <image class="cell__left-icon" v-if="isImagePath(leftIcon)" :src="leftIcon" mode="widthFix" />
        <text v-else :class="['cell__left-icon', 'iconfont', `${leftIcon}`]"></text>
      </template>
      <slot name="leftIcon"></slot>
      <view class="cell-label" v-if="label">{{ label }}</view>
    </view>

    <view class="cell-content" v-if="content">
      <view class="cell-content-text" v-if="!contentType">
        {{ content }}
      </view>

      <image
        class="cell-content-img"
        v-else-if="['img', 'image'].includes(contentType)"
        :src="content"
        mode="scaleToFill"
      />
    </view>

    <slot></slot>

    <text v-if="rightIcon" class="arrow-right arrow__small cell-right__icon"></text>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

interface Props {
  label: string;
  content?: string;
  leftIcon?: string;
  iconLeft?: string;
  iconRight?: string;
  contentType: string;
  rightIcon: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  label: '',
  content: '',
  leftIcon: '',
  iconLeft: '',
  iconRight: '',
  contentType: '',
  rightIcon: false
});

const isImagePath = (path: string) => {
  const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'svg', 'psd', 'tif'];

  // 判断是否是 http 或 https 开头
  if (/^https?:\/\//i.test(path)) {
    return true;
  }

  // 正则检查是否是图片扩展名
  const regex = new RegExp(`\\.(${imageExtensions.join('|')})$`, 'i');
  return regex.test(path);
};
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
